<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">

        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

        <style>
            html, body, #map-canvas {
                height: 75%;
                width: 85%;
                margin: 0px;
                padding: 0px

            }
            #panel {
                position: absolute;
                top: 5px;
                left: 30%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }
        </style>


        <script>

            <%

                        String one = (String) request.getParameter("one");
                        String two = (String) request.getParameter("two");


            %>


                var address1=<% out.print("'" + one + "'");%>;
                var address2=<% out.print("'" + two + "'");%>;
                var geocoder;
                var directionsDisplay;
                var directionsService = new google.maps.DirectionsService();
                var map;
                var haight = new google.maps.LatLng(37.7699298, -122.4469157);
                var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

                var coOrdinates="";

                var from="";
                var to=""

                function initialize() {
                    geocoder = new google.maps.Geocoder();
                    directionsDisplay = new google.maps.DirectionsRenderer();
                    var mapOptions = {
                        zoom: 14,
                        center: haight
                    }
                    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                    directionsDisplay.setMap(map);

                    FromcodeAddress();
                    TocodeAddress();

                }

          

                function FromcodeAddress() {
                    var address = address1;
                    geocoder.geocode( { 'address': address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {


                            coOrdinates=results[0].geometry.location;
                            var finalCord=coOrdinates+"";
                            var length=((coOrdinates+"").length)-1;

                            var filter1=finalCord.substring(1, length);
                            var filter2=filter1.split(",");

                            haight = new google.maps.LatLng(filter2[0], filter2[1]);


                            /*      alert("[ "+coOrdinates+" ] [  "+finalCord.substring(1, length)+" ]");
                        alert(filter2[0]);*/

                        } else {
                            alert('Geocode was not successful for the following reason: ' + status);
                        }
                    });
                }

                function TocodeAddress() {
                    var address = address2;
                    geocoder.geocode( { 'address': address}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {


                            coOrdinates=results[0].geometry.location;
                            var finalCord=coOrdinates+"";
                            var length=((coOrdinates+"").length)-1;

                            var filter1=finalCord.substring(1, length);
                            var filter2=filter1.split(",");

                            oceanBeach = new google.maps.LatLng(filter2[0], filter2[1]);

                            calcRoute();


                        } else {
                            alert('Geocode was not successful for the following reason: ' + status);
                        }
                    });
                }

                function calcRoute() {

                    var request = {
                        origin: haight,
                        destination: oceanBeach,
                        // Note that Javascript allows us to access the constant
                        // using square brackets and a string value as its
                        // "property."
                        travelMode: google.maps.TravelMode['DRIVING']
                    };
                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                }


                google.maps.event.addDomListener(window, 'load', initialize);


        </script>
    </head>
    <body>




        <div id="map-canvas"></div>

    </body>
</html>